<template>
  <div class="myform">
    <el-form
      ref="form"
      :rules="interviewRules"
      :model="interviewForm"
      label-width="100px"
    >
      <div class="company">
        <el-row type="flex" class="row-bg">
          <el-col :span="6"
            ><div class="grid-content bg-purple"><h2>公司信息</h2></div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <!-- <label>公司名称：</label> -->

              <el-form-item label="公司名称：" prop="name">
                <!-- <el-input v-model="interviewForm.name" disabled></el-input> -->
                <span v-text="interviewForm.name"></span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6" :offset="1">
            <div class="grid-content bg-purple">
              <el-form-item label="公司类型：" prop="companyType">
                <span v-text="interviewForm.companyType"></span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5" :offset="1"
            ><div class="grid-content bg-purple">
              <el-form-item
                label="公司位置："
                prop="address"
                label-width="100px"
              >
                <span v-text="interviewForm.address"></span>
              </el-form-item></div
          ></el-col>
        </el-row>
      </div>

      <el-row type="flex" class="row-bg">
        <el-col :span="6"
          ><div class="grid-content bg-purple"><h2>面试信息</h2></div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="面试途径："
              prop="interviewChannel"
              label-width="100px"
            >
              <span v-text="interviewForm.interviewChannel"></span>
            </el-form-item></div
        ></el-col>
        <el-col :span="6" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item
              label="面试平台："
              prop="interviewPlatform"
              label-width="100px"
            >
              <span v-text="interviewForm.interviewPlatform"></span>
            </el-form-item></div
        ></el-col>
        <el-col :span="5" :offset="1"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="岗位类型："
              prop="postType"
              label-width="100px"
            >
              <span v-text="interviewForm.postType"></span>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="面试岗位："
              prop="postName"
              label-width="100px"
            >
              <span v-text="interviewForm.postName"></span>
            </el-form-item></div
        ></el-col>
        <el-col :span="6" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item
              label="面试时间："
              prop="interviewTime"
              label-width="100px"
            >
              <span v-text="interviewForm.interviewTime"></span>
            </el-form-item></div
        ></el-col>

        <el-col :span="5" :offset="1"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="岗位设定薪资："
              prop="postSalary"
              label-width="110px"
            >
              <span v-text="interviewForm.postSalary"></span>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="岗位要求补充："
              prop="postNeed"
              label-width="110px"
            >
              <span v-text="interviewForm.postNeed"></span>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="6"
          ><div class="grid-content bg-purple"><h2>面试结果</h2></div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="面试结果：" prop="result" label-width="100px">
              <span v-text="interviewForm.result"></span>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="是否一面：" prop="isFrist" label-width="120px">
              <span v-text="interviewForm.isFrist"></span>
            </el-form-item></div
        ></el-col>
        <el-col :span="7" :offset="1"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="是否进入下轮："
              prop="isNext"
              label-width="110px"
            >
              <span v-text="interviewForm.isNext"></span>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="是否录用：" prop="isLy" label-width="100px">
              <span v-text="interviewForm.isLy"></span>
            </el-form-item></div
        ></el-col>
        <el-col :span="5" :offset="1"
          ><div class="grid-content bg-purple-light">
            <el-form-item
              label="第几次面试："
              prop="interviewTimes"
              label-width="100px"
            >
              <span v-text="interviewForm.interviewTimes"></span>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="结果描述："
              prop="resultDesc"
              label-width="100px"
            >
              <span v-text="interviewForm.resultDesc"></span>
            </el-form-item></div
        ></el-col>

        <el-col :span="6" :offset="1">
          <div class="grid-content bg-purple">
            <el-form-item label="面试感想：" prop="feeling" label-width="120px">
              <span v-text="interviewForm.feeling"></span>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="6"
          ><div class="grid-content bg-purple"><h2>面试问题</h2></div></el-col
        >
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="20">
          <!-- <div id="Test" style="height: 350px">
            <quill-editor
              ref="myTextEditor"
              v-model="interviewForm.remark"
              :options="quillOption"
              style="height: 300px"
            >
            </quill-editor>
          </div> -->
          <span v-html="interviewForm.remark"></span>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="1" :offset="21">
        <div class="grid-content bg-purple">
          <el-button
            type="primary"
            @click="onSubmit"
            icon="el-icon-circle-close"
            >返回</el-button
          >
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import quillConfig from "../quill-config.js";
// import { createInterview, getIterviewById } from "@/api/interview";
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      quillOption: quillConfig,
      interviewForm: {
        a1: null,
        a2: null,
        a3: null,
        a4: null,
        a5: null,
        a6: null,
        address: null,
        companyStaff: null,
        companyStaffPost: null,
        companyStaffQq: null,
        companyStaffTell: null,
        companyStaffWx: null,
        companyType: null,
        feeling: null,
        infoId: null,
        interviewChannel: null,
        interviewPlatform: null,
        interviewTime: null,
        interviewTimes: null,
        isFrist: null,
        isLy: null,
        isNext: null,
        name: null,
        postName: null,
        postNeed: null,
        postSalary: null,
        postType: null,
        q1: null,
        q2: null,
        q3: null,
        q4: null,
        q5: null,
        q6: null,
        result: null,
        resultDesc: null,
        remark: null,
      },
      form: {
        name: "",
      },
      options: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      value: "",
      interviewRules: {
        name: [{ required: true, trigger: "blur", message: "请输入公司名" }],
        companyType: [
          { required: true, trigger: "blur", message: "请输入公司类型" },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {},

    onSubmit() {
     this.$router.push({path:"index"})
    },

    getInterviewById(id) {
      getIterviewById(id).then((response) => {
        if (response.code == 200) {
          this.interviewForm = response.data;
        } else {
          this.$message({
            message: response.msg,
            type: "error",
            duration: 1000,
          });
        }
      });
    },
  },
  created() {
    const tabe = this.$route.query.row;
    if (tabe.infoId != null) {
      this.interviewForm = tabe;
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.myform {
  margin-left: 10px;
  width: 95%;
  // background-color: rgb(151, 126, 147);
}
</style>
